v0 Vibe Coding：前端開發指南

為現有後端構建前端介面

簡介

在本課程中，您將學習如何使用 v0 通過「Vibe Coding」技術快速構建現代化的網頁前端。我們將為您提供一個功能完整的後端，您的任務是創建一個與之交互的使用者介面。

步驟 1：訪問後端管理頁面

首先，您需要訪問後端管理頁面以了解數據結構並獲取必要的文檔。

1. 導航至後端登錄頁面：qn37.parami.ai/login。
2. 使用提供的憑據登錄。

後端登錄頁面

步驟 2：下載 API 文檔

為了讓 v0 了解如何與您的後端通信，您需要為其提供 API 文檔。

1. 登錄後，在儀表板上找到 Download API Docs for v0 按鈕。
2. 點擊按鈕下載文檔文件。

下載 API 文檔

下載的文件將是一個 Markdown (.md) 文件，名稱通常類似於 marketplace-api-groupXXXX.md。

下載文件示例

步驟 3：設置 v0

現在，前往 v0.dev 開始構建您的前端。

重要：選擇正確的模型

為了有效管理您的使用預算，請確保使用 v0 Mini 模型，而不是默認的 “v0 Max”。

1. 點擊提示詞區域的模型選擇器。
2. 選擇 v0 Mini。

選擇 v0 Mini 模型

Note

您的剩餘額度顯示在右上角（如上圖中的藍色框所示）。新帳戶通常會有 $5.00 的額度。使用 Mini 模型有助於節省預算。

步驟 4：為 v0 提供上下文

上傳您在步驟 2 中下載的 API 文檔，以便 v0 知道如何與您的後端集成。

1. 點擊提示欄中的 Upload 按鈕（迴紋針或加號圖標）。
2. 選擇 Upload from computer 並選擇您的 .md 文檔文件。

將 API 文檔上傳至 v0

步驟 5：生成前端

上傳文檔後，您現在可以開始「Vibe Coding」您的介面了。

1. 輸入清晰的提示詞，例如："Make a frontend for this marketplace"（為這個市場製作一個前端）。
2. 點擊 Send 按鈕開始生成過程。

在 v0 中輸入提示詞

步驟 6：預覽與調整

v0 將生成應用程序的實時預覽。

1. 網頁預覽 (藍色框)： 在主窗口中查看生成的 UI，了解應用程序的外觀和行為。
2. 後續提示與建議 (綠色框)： 如果您需要更改（例如：「將主色調改為藍色」或「添加搜索欄」），請使用此區域提供額外指令。
3. 發佈按鈕 (紅色框)： 當您對結果滿意時，點擊右上角的 Publish 按鈕。

預覽與調整

步驟 7：發佈您的網頁應用

要讓其他人可以訪問您的網頁應用，您需要將其發佈。

1. 在發佈對話框中，點擊 Publish to Production。

確認發佈

步驟 8：訪問您的實時網站

恭喜！您的網頁應用現在已正式上線。v0 將為您提供一個託管應用程序的唯一 URL。

已發佈應用的 URL

您現在可以訪問此 URL 來查看您功能完整的前端應用！